<template>
    <div>
        <a-modal
            title="报名详情"
            :visible="visible"
            @ok="visible = false"
            @cancel="visible = false"
            cancelText="关闭88"
            :width="1000"
            :footer="null"
            class="registeredDetails-modal"
            :dialogStyle="{top:'20px'}"
        >
            <template slot="footer">
                <div style="display: flex;justify-content: flex-end;">
                    <a-button type="primary" @click="visible = false">关闭</a-button>
                </div>
            </template>
            <div class="registeredDetails-content">
                <table bordercolor="#d9d9d9" style="width: calc(100% - 30px); margin-left: 15px;" border="1">
                    <!-- <tr>
                        <th>审评报名任务名称</th>
                        <td colspan="5">{{ detailsData.fjcbmrwmc }}</td>
                    </tr> -->
                    <!-- <tr>
                        <th>审评员类型</th>
                        <td colspan="5">{{ detailsData.fjcylx }}</td>
                    </tr> -->
                    <tr>
                        <!-- <th>报名日期</th>
                        <td>{{ detailsData.fbmksrq }}至{{ detailsData.fbmjsrq }}</td> -->
                        <th>审评员类型</th>
                        <td>{{ detailsData.fjcylx }}</td>
                        <th>审评日期</th>
                        <td>{{ detailsData.fcykssj }}至{{ detailsData.fcyjssj }}</td>
                        <th>审评天数</th>
                        <td>{{ detailsData.fjcts }}</td>
                    </tr>
                    <tr>
                        <th>审评要求</th>
                        <td colspan="5">{{ detailsData.fjcyq }}</td>
                    </tr>
                    <tr>
                        <th>报名状态</th>
                        <td>{{ detailsData.fbmzt }}</td>
                        <th>发布日期</th>
                        <td>{{ detailsData.ffbrq }}</td>
                        <th>发布人</th>
                        <td>{{ detailsData.ffbrxm }}</td>
                    </tr>
                    <!-- <tr>
                        <th colspan="6" class="dzyh-th">应报名人数</th>
                    </tr>
                    
                    <tr>
                        <th>组长人数</th>
                        <td>{{ detailsData.fzzrs }}</td>
                        <th>组员人数</th>
                        <td>{{ detailsData.fzyrs }}</td>
                        <th>预备审评员人数</th>
                        <td>{{ detailsData.fybrs }}</td>
                    </tr>
                    <tr>
                        <th colspan="6" class="dzyh-th">实报名人数</th>
                    </tr>
                    <tr>
                        <th>组长人数</th>
                        <td>{{ detailsData.fbmzzrs }}</td>
                        <th>组员人数</th>
                        <td>{{ detailsData.fbmzyrs }}</td>
                        <th>预备审评员人数</th>
                        <td>{{ detailsData.fbmybrs }}</td>
                    </tr> -->
                    
                </table>
            </div>
            <commpVxeTable
                :key="manualKey"
                :isCanWrap="true"
                :canWrapTableHeight="320"
                :config="manualdataTableConfig" 
                :columns="manualcolumnsVxe" 
                :formItem="[]"
                @checkboxChange="checkboxChange"
                ref="acceptanceRegistrationRef"
            >
                    <template v-slot:realname_name="{row}">
                        <!-- <a @click="viewClick(row,true)"> -->
                            <span style="padding-right: 21;" v-if="row.realname && row.realname.length == 2">
                                <span v-for="(trem,tI) in row.realname.split('')" :key="tI" >
                                    {{trem}}
                                <span v-if="tI+1 !== row.realname.split('').length">&nbsp;&nbsp;</span>
                                </span>
                            </span>
                            <span style="padding-right: 21;" v-else>{{ row.realname }}</span>
                        <!-- </a> -->
                    </template>
                <template v-slot:fstate_default="{row}">
                    {{ row.fstate=='0'?'执行中':(row.fstate=='1'?'已结束':'') }}
                </template>
            </commpVxeTable>
        </a-modal>
    </div>
</template>
<script>
import { ybmjhqueryBmxmBySqsx, } from './service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api'
export default {
    components:{
        commpVxeTable,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            manualKey:null,
            manualformItem:[
                {
                    label: '真实姓名',
                    model: 'realname',
                }
            ],
            manualcolumnsVxe:[
            { 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '姓名', //列头显示文字
                field: 'realname',
                slots: { 
                    header:'realname_header',
                    default: 'realname_name'
                },
                titleInterval:true,
                width:90,
            },{
                title: '工作单位', //列头显示文字
                field: 'fgzdw',
            },{
                title: '审评类型', //列头显示文字
                field: 'flx',
            },{
                title: '审评身份', //列头显示文字
                field: 'fssk',
                width:120,
            },{
                title: '联系电话',
                field: 'phone',
                width:120,
            },{
                title: '职称',
                field: 'fzc',
                titleInterval:true,
                slots: { 
                    header:'fzc_header',
                },
            },{
                title: '职务',
                field: 'fzw',
                titleInterval:true,
                slots: { 
                    header:'fzw_header',
                },
            }], 
            manualdataTableConfig:{
                api: assessCheckApi.ybmjhqueryYbmRyList,
                rowId: 'id',
                fywflcode:'001002',
                height:window.innerHeight - 450,
                paramet:{},
                isIdeaText:'',
                autoHidden:true,
            },
            selectArr:[],
            currentData:{},
            selectData:{},
            detailsData:{},
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val){
            ybmjhqueryBmxmBySqsx(val).then(res=>{
                if(res.code == 200){
                    this.detailsData = res.result
                }
            })
            this.currentData = val
            this.manualdataTableConfig.paramet={...val}

            this.manualKey = Date.now()
        },
        checkboxChange(val){
            //console.log(val)
        },
        handleOk(){
        }
    }
}
</script>
<style lang="less">
.registeredDetails-modal{
    .ant-modal-body{
        padding: 5px;
    }
    
}
.registeredDetails-content{
    display: flex;
    flex-wrap: wrap;
    th,td{
        padding: 5px;
    }
    td{
        min-width: 130px;
    }
    th{
        width: 140px;
        text-align: center;
        background-color: #e6f7ff;
        font-size: 16px;
    }
    .dzyh-th{
        background: #fff;
        text-align: center;
        font-size: 18px;
    }
    textarea.ant-input{
        margin-top: 4px;
    }
    .ant-form-item{
        // display: flex;
        // align-items: center;
        .ant-form-item-label{
            font-size: 18px;
            font-weight: 600;
            width: 135px;
            font-family:simHei;
            background: #e6f7ff;
            
        }
        .ant-form-item-control-wrapper{
            vertical-align: middle;
        }
        .ant-form-item-control{
           margin-top: 5px;
        }
    }
    .toolbox-form-item{
        width: 50%;
        // padding: 3px;
    }
    .ant-form-item-with-help{
        margin-bottom: 10px;
    }
    .ant-form-item-control-wrapper{
        width: 170px;
    }
    
    .form-model-big-box{
        .form-item-flex-1{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
                
            }
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;
            
            .ant-checkbox-group{
                height: 40px;
                line-height: 40px;
            }
        }
    }
    .form-model-big-box1{
        .ant-form-item-label{
            
            margin: 4px 3px;
            label{
                padding-left: 3px;
                
            }
            
        }
    }
    .ant-form-inline .ant-form-item > .ant-form-item-label{
        vertical-align: middle !important;
    }
    .ant-divider-horizontal.ant-divider-with-text-center{
        margin: 8px 0;
    }
}
</style>